<template>
  <div>
    <Head></Head>
    <el-container  style="height: 564px;">

      <el-aside  width="200px" style="background-color: rgb(238, 241, 246)">

        <el-menu background-color="rgba(240, 240, 240)" unique-opened router text-color="#000"
        active-text-color="#409eff"  :default-active="activePath">

          <el-submenu :index="item.id" v-for="item in menulist" :key="item.id" >
            <template slot="title"><i :class="item.ico"></i>{{item.name}}</template>
              <el-menu-item :index="'/' + subitem.path" v-for="subitem in item.children" :key="subitem.id" @click="saveNavstate('/' + subitem.path)" >
                <template slot="title"><i :class="subitem.ico"></i>{{subitem.name}}</template>
              </el-menu-item>
          </el-submenu>

        </el-menu>
      </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      
    </el-container>
  </div>
</template>

<script>
  import Head from '../components/Head.vue'
  
  export default {
    components: {Head},
    data() {
      return {
        menulist: [
          {
            id: '1',
            name: '用户管理',
            ico: 'el-icon-s-custom',
            children: [{
              id: '1-1',
              name: '用户列表',
              ico: 'el-icon-menu',
              path: 'admin/manage'
            }]
          },
          {
            id: '2',
            name: '设备管理',
            ico: 'el-icon-s-cooperation',
            children: [{
              id: '2-1',
              name: '设备信息',
              ico: 'el-icon-menu',
              path: 'admin/buy'
            }]
          },
          {
            id: '3',
            name: '设备维修',
            ico: 'el-icon-s-release',
            children: [{
              id: '3-1',
              name: '维修记录',
              ico: 'el-icon-menu',
              path: 'admin/wxiu'
            }]
          },
          {
            id: '4',
            name: '设备报废',
            ico: 'el-icon-delete-solid',
            children: [{
              id: '4-1',
              name: '报废记录',
              ico: 'el-icon-menu',
              path: 'admin/bfei'
            }]
          }

        ],
        
        activePath: ''
      }
    },
    created() {
      
      this.activePath = window.sessionStorage.getItem('activePath')
    },
    methods: {
      saveNavstate(activePath) {
        window.sessionStorage.setItem('activePath', activePath)
        this.activePath =activePath
      }
    }
    
  }
</script>

<style scoped>
.el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }

  
</style>